---
type: tutorial
unitTitle: 再利用可能なページレイアウトによる時間とエネルギーの節約
title: 'ユニット4の導入 - レイアウト'
description: >-
  「初めてのAstroブログ」チュートリアル -
  Astroレイアウトを使用して、ページとブログ投稿で共通の要素とスタイルを共有する
i18nReady: true
---

import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';


コンポーネントを使用できるようになったところで、カスタムレイアウトを作成しましょう！

## 概要

このユニットでは、ページとブログ投稿で共通の要素とスタイルを共有するためのレイアウトを作成します。

そのために、以下のことをおこないます。

- 再利用可能なレイアウトコンポーネントを作成する
- `<slot />`を使用してコンテンツをレイアウトに渡す
- Markdownのフロントマターからデータをレイアウトに渡す
- レイアウトを入れ子にする



<Box icon="check-list">

## チェックリスト

<Checklist>
- [ ] レイアウトを使用してページデザインを改良する準備ができた！
</Checklist>
</Box>
